<template>
<!--案件类别占比-->
<div class="case-type-proportion title-block">
  <div class="title-block-title">
    案件类别占比
    <div class="btn-wrap">
      <el-radio-group v-model="timeType">
        <el-radio :label="1">今日</el-radio>
        <el-radio :label="2">本周</el-radio>
        <el-radio :label="3">本月</el-radio>
        <el-radio :label="4">全年</el-radio>
      </el-radio-group>
    </div>
  </div>
  <div class="title-block-content" >
    <div class="data-wrap">
      <div class="ctrl-wrap">
        <el-radio-group size="mini" v-model="caseType">
          <el-radio-button label="a">警情</el-radio-button>
          <el-radio-button label="b">受案</el-radio-button>
          <el-radio-button label="c">立案</el-radio-button>
          <el-radio-button label="d">破案</el-radio-button>
        </el-radio-group>
      </div>
      <!-- <div class="total">案件总数：{{totalCaseNum}}</div> -->
      <div class="chart-wrap">
        <xdh-charts :options="chartOpt" width="60%" height="100%"></xdh-charts>
        <ul class="legend-wrap">
          <li v-for="item in legendList" :key="item.prop">
            <em :style="{'background': item.color}"></em>
            <span class="name">{{item.name}}</span>
            <span class="number">{{item.number}}</span>
            <span class="precent">{{item.precent}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
</template>

<style lang="scss" scoped>
.case-type-proportion{
  .btn-wrap{
    /deep/ .el-radio+.el-radio{
      margin-left: 10px;
    }
    /deep/ .el-radio__input{
      display: none;
    }
  }
  .ctrl-wrap{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding-left: 10px;
    .tabs{
      flex: 1;
      text-align: right;
    }
  }
  .data-wrap{
    padding: 5px;
    height: 100%;
    display: flex;
    flex-flow: column;
    .chart-wrap{
      display: flex;
      flex: 1;
      width: 100%;
      flex-flow: row nowrap;
      .legend-wrap{
        flex: 1;
        height: 100%;
        margin: 0 0 0 5px;
        padding: 0; 
        li{
          display:flex;
          list-style: none;
          flex-flow: row nowrap;
          align-items: center;
          padding-right: 5px;
          line-height: 1.8;
          em{
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 3px;
          }
          .name{
            flex: 1;
            text-align: left;
          }
          .number{
            // flex: 1;
            text-align: center;
          }
          .precent{
            flex: 1;
            text-align:right;
          }
        }
      }
    }
  }
}

</style>

<script>
import XdhCharts from '@/widgets/xdh-echarts'
const COLOR = ['#3AA0FF', '#36CBCB', '#4DCB73', '#FAD337', '#F2637B', '#975FE4']
export default {
  name: 'caseTypeProportion',
  components: {
    XdhCharts
  },
  props: {},
  data() {
    return {
      caseType: '',
      timeType: '',
      activeName: 'second',
      caseMount: [ // 123224
        {prop: 'burglar', name: '入室盗窃', number: 44360}, // '36％'
        {prop: 'steal', name: '扒窃', number: 24644}, // '20％'
        {prop: 'injury', name: '故意伤害', number: 19715}, // '16％'
        {prop: 'arson', name: '纵火', number: 12322}, // '10％'
        {prop: 'murder', name: '杀人', number: 11090}, // '9％'
        {prop: 'other', name: '其他', number: 11092} // '9％'
      ],
      options: {
        title: {
          text: '案件总数:',
          subtext: '',
          // x: 'left',
          top: 5,
          left: 5,
          textStyle: {
            fontSize: 14
          }
        },
        color: COLOR,
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c}件 ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          left: 10,
          bottom: 0,
          data: [] // ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '案件类型',
            type: 'pie',
            radius: ['50%', '65%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                formatter: '{b}: \n {c}件',
                textStyle: {
                  fontSize: '18',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          }
        ]
      }
    }
  },
  computed: {
    totalCaseNum() {
      return this.caseMount.reduce((total, item, index) => {
        total += item.number
        return total
      }, 0)
    },
    chartOpt() {
      let legendData = []
      let data = this.caseMount.map((item) => {
        legendData.push(item.name)
        return {name: item.name, value: item.number}
      })
      
      let opt = {...this.options}
      opt.series[0].data = data
      opt.legend.data = legendData
      opt.title.subtext = this.totalCaseNum + '件'
      return opt
    },
    legendList() {
      // this.totalCaseNum
      return this.caseMount.map((item, index) => {
        return {
          prop: item.prop,
          name: item.name,
          number: item.number,
          color: COLOR[index],
          precent: Math.floor((item.number / this.totalCaseNum) * 100) + '%'
        } 
      })
    }
  },
  methods: {
    
  },
  mounted() {
    console.log(this.legendList)
  }
}
</script>

